/**
 * 考勤情况
 */
import React from 'react';
import { Tag, Form, Table } from 'antd';
import { FormLayout } from '../../components';

const TYPE_MAP = {
    1: '迟到',
    2: '早退',
    3: '缺卡',
    4: '请假',
    5: '旷工'
};

const TAG_MAP = {
    0: <Tag color="red">不合格</Tag>,
    1: <Tag color="green">合格</Tag>
};

const Highlight = ({ children }) => <span style={{ color: '#F5222D' }}>{children}</span>;

/**
 * @export
 * @param {*} type  考勤周期类型 'week','month','quarter'
 * @returns
 */
export default function Attendance({ data = {}, type = 'week' }) {
    const { attendanceResult = '', attendanceResults = {} } = data;
    const { detail = [] } = attendanceResults;

    const columns = [
        {
            title: '类型',
            dataIndex: 'type',
            render(text) {
                return TYPE_MAP[text];
            }
        },
        {
            title: '考核区间',
            dataIndex: `${type}Value`,
            render(text, row = {}) {
                const unit = row.type === 4 ? '小时' : '次';
                return `不超过 ${text} ${unit}`;
            }
        },
        {
            title: '执行情况',
            dataIndex: 'executeInfo',
            render(text, row = {}) {
                const unit = row.type === 4 ? '小时' : '次';
                const ret = `${text} ${unit}`;
                if (row.executeResult === '不合格') {
                    return <Highlight>{ret}</Highlight>;
                }
                return ret;
            }
        },
        {
            title: '考核结果',
            dataIndex: 'executeResult',
            render(text) {
                if (text === '不合格') {
                    return <Highlight>{text}</Highlight>;
                }
                return text;
            }
        }
    ];

    return (
        <div>
            <div style={{ width: 900 }}>
                <FormLayout type="full">
                    <Form.Item label="考勤指标考核结果">{TAG_MAP[attendanceResult]}</Form.Item>
                </FormLayout>
                <FormLayout type="full">
                    <Form.Item label="考勤要求">
                        试用期间以下考勤明细存在
                        <span style={{ padding: 8, color: 'red' }}>{attendanceResults.requirementsCount}</span>
                        项不符合时，则为不合格
                    </Form.Item>
                </FormLayout>
                <FormLayout type="full">
                    <Form.Item label="考勤内容">
                        <Table rowKey="type" columns={columns} dataSource={detail} pagination={false} bordered />
                    </Form.Item>
                </FormLayout>
            </div>
        </div>
    );
}
